<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>fuint会员营销管理系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">

  <link rel="stylesheet" href="layui/css/layui.css">
  <style>
    /* 移动端 */
    @media screen and (max-width: 768px) {
      .layui-layout-admin .layui-layout-left,
      .layui-layout-admin .layui-body,
      .layui-layout-admin .layui-footer{left: 0;}
      .layui-layout-admin .layui-side{left: -300px;}
      .shop-radio{
        display: flex;
        align-content: center;
      }
      .shop-search{
        display: flex;
      }
    }
  </style>
</head>
<body>

    <!-- 内容主体区域 -->
    <div >
      <!-- 内容主体区域  面包屑-->
      <span class="layui-breadcrumb">
              <a href="index.html">首页</a>
              <a><cite>商品管理</cite></a>
              <a><cite>商品列表</cite></a>
            </span>

      <!-- 水平线 -->
      <hr class="layui-bg-blue">

      <!-- 搜索条件 -->
      <fieldset class="layui-elem-field">
        <legend>筛选条件</legend>
        <div class="layui-field-box">
          <div class="layui-form-item layui-form-pane">
            <form class="layui-form shop-search">
              <label class="layui-form-label">商品名称</label>
              <div class="layui-input-inline">
                <input type="text" id="Title" placeholder="请输入商品名称" class="layui-input">
              </div>
              <label class="layui-form-label">商品条码</label>
              <div class="layui-input-inline">
                <input type="text" id="Code" placeholder="请输入商品条码" class="layui-input">
              </div>
              <label class="layui-form-label">商品类型</label>
              <div class="layui-input-inline">
                <input type="text" id="Type" placeholder="请输入商品类型" class="layui-input">
              </div>
<!--              <div class="layui-form-item">-->
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                  <select name="interest" lay-filter="aihao" id="Status" class="layui-input">
                    <option value="1">上架</option>
                    <option value="0">下架</option>
                    </select>
                </div>
            </form>

          </div>

          <div class="layui-form-item layui-form-pane">
            <div class="layui-inline">
              <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
              <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
            </div>
          </div>
        </div>
      </fieldset>

      <table class="layui-hide" id="test" lay-filter="test"></table>

      <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="insert">新增商品</button>
          <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
          <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
          <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
      </script>

      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      </script>

      <script type="text/html" id="insert_form">
        <div class="layui-field-box">
          <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">商品类型</label>
            <div class="layui-input-inline">
              <input type="text" id="goodType" class="layui-input" placeholder="请输入商品类型">
            </div>
          </div>

          <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
              <input type="text" id="goodTitle" class="layui-input" placeholder="请输入商品名称">
            </div>
          </div>
          <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">商品条码</label>
            <div class="layui-input-inline">
              <input type="text" id="goodCode" class="layui-input" placeholder="请输入商品条码">
            </div>
          </div>
          <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">商品价格</label>
            <div class="layui-input-inline">
              <input type="text" id="goodPrice" class="layui-input" placeholder="请输入商品价格">
            </div>
          </div>
          <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">所属店铺</label>
            <div class="layui-input-inline">
              <input type="text" id="goodStore" class="layui-input" placeholder="请输入所属店铺">
            </div>
          </div>
<!--          <div class="layui-form-item layui-form-pane">-->
<!--            <label class="layui-form-label">商品图片</label>-->
<!--            <div class="layui-input-inline">-->
<!--              <input type="text" id="goodPic" class="layui-input" placeholder="请输入商品图片">-->
<!--            </div>-->
<!--          </div>-->

          <div class="layui-form-item layui-form-pane">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline shop-radio" >
              <input type="radio" name="goodStatus" value="1" title="上架" checked>
              <text>上架</text>
              <input type="radio" name="goodStatus" value="0" title="下架" >
              <text>下架</text>
            </div>
          </div>

        </div>
      </script>
    </div>



<script src="layui/layui.js" ></script>
<script src="jquery/jquery-3.6.0.js" ></script>
<script>


  let username = sessionStorage.getItem("username");

  $("#header_username").text(username);

  $("#iReset").click(function () {
    $("#Title").val("");
    $("#Code").val("");
    $("#Type").val("");
    tableFlush();
  });

  $("#searchVal").click(function () {
    let goodTitle = $("#Title").val();
    let goodCode = $("#Code").val();
    let goodType = $("#Type").val();
    let goodStatus=$("#Status option:selected").val();
    let whereJSON = {};
    if(goodTitle != null && goodTitle != '') {
      whereJSON.goodTitle = goodTitle;
    }
    if(goodCode != null && goodCode != '') {
      whereJSON.goodCode = goodCode;
    }
    if(goodType != null && goodType != '') {
      whereJSON.goodType = goodType;
    }
    if(goodStatus != null ) {
      whereJSON.goodStatus = goodStatus;
    }
    console.log(whereJSON)
    tableFlush(whereJSON);
  });

  function tableFlush(whereJSON) {
    layui.use('table', function(){
      var table = layui.table;
      //  render  渲染
      table.render({
        elem: '#test'
        ,url:'/good/selectByPage'
        ,where:whereJSON
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
          title: '提示'
          ,layEvent: 'LAYTABLE_TIPS'
          ,icon: 'layui-icon-tips'
        }]
        ,title: '商品数据表'
        ,cols: [[
          {type: 'checkbox', fixed: 'left'}
          ,{title:'ID', width:80,  fixed: 'left' ,templet: function(res){      //unresize: true,
              return '<em>'+ res.goodId +'</em>'
            }}
          ,{title:'所属店铺', width:160, unresize: true, templet: function(res){
              return '<em>'+ res.goodStore +'</em>'
            }}
          ,{title:'商品名称', width:160, unresize: true, templet: function(res){
              return '<em>'+ res.goodTitle +'</em>'
            }}
          ,{title:'主图', width:120, unresize: true, templet: function(res){
              return '<em>'+ res.goodPic +'</em>'
            }}
          ,{title:'商品条码', width:120, unresize: true, templet: function(res){
              return '<em>'+ res.goodCode +'</em>'
            }}
          ,{title:'所属分类', width:120, unresize: true, templet: function(res){
              return '<em>'+ res.goodType +'</em>'
            }}
          ,{title:'价格', width:120, unresize: true, templet: function(res){
              return '<em>'+ res.goodPrice +'</em>'
            }}
          ,{title:'创建时间', width:180, unresize: true, templet: function(res){
              return '<em>'+ res.goodCreateTime +'</em>'
            }}
          ,{title:'更新时间', width:180, unresize: true, templet: function(res){
              return '<em>'+ res.goodUptime +'</em>'
            }}
          ,{title:'上架状态', width:100, unresize: true, templet: function(res){
              return '<em>'+ res.goodStatus +'</em>'
            }}
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
        ]]
        ,page: true
      });

      //头工具栏事件
      table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
          case 'insert':
            layer.open({     // 弹出框处理  模态框
              type: 1               // 模态框
              ,title: '新增商品' //不显示标题栏
              ,closeBtn: true
              ,area: ['500px','500px']  // 宽和高
              ,shade: 0.5
              ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
              ,btn: ['新增', '取消']
              ,btnAlign: 'c'
              ,moveType: 1 //拖拽模式，0或者1
              ,content: $('#insert_form').html()         // 引入自定义表单
              ,btn1: function(index, layero){            // 这个是新增按钮点击事件
                // layer.msg("新增按钮执行");
                let goodType = $("#goodType").val();
                let goodTitle = $("#goodTitle").val();
                let goodCode = $("#goodCode").val();
                let goodPrice = $("#goodPrice").val();
                let goodStore = $("#goodStore").val();
                // let goodPic = $("#goodPic").val();
                let goodStatus = $("input[name='goodStatus']:checked").val();
                $.ajax({
                  url:"/good/insert",           // 请求路径
                  type:"post",                  // 请求的方式，不区分大小写
                  cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                  contentType:"application/json;charset=utf-8",
                  data: JSON.stringify({
                    goodType:goodType,
                    goodTitle:goodTitle,
                    goodCode:goodCode,
                    goodPrice:goodPrice,
                    goodStore:goodStore,
                    // goodPic:goodPic,
                    goodStatus:goodStatus
                  }),
                  datatype:"json",        // 返回类型，text文本、html页面、json数据
                  success:function(response){
                    console.log("返回: " + response);
                    if(response.code === 200) {
                      layer.msg("新增商品成功!");
                      layer.close(index);                         // 关闭当前窗口
                      tableFlush();
                    }
                  },
                  error:function(response){
                    console.log("出错返回: " + response);
                  }
                });
              }
              ,success: function(layero){

              }
            });
            break;
          case 'getCheckData':
            var data = checkStatus.data;
            layer.alert(JSON.stringify(data));
            break;
          case 'getCheckLength':
            var data = checkStatus.data;
            layer.msg('选中了：'+ data.length + ' 个');
            break;
          case 'isAll':
            layer.msg(checkStatus.isAll ? '全选': '未全选');
            break;

                //自定义头工具栏右侧图标 - 提示
          case 'LAYTABLE_TIPS':
            layer.alert('这是工具栏右侧自定义的一个图标按钮');
            break;
        };
      });

      //监听行工具事件
      table.on('tool(test)', function(obj){
        var data = obj.data;
        console.log(data)
        if(obj.event === 'del'){
          layer.confirm('真的删除行么', function(index){
            $.ajax({
              url:"/good/deleteById",           // 请求路径
              type:"post",                  // 请求的方式，不区分大小写
              cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
              data: {
                goodId:data.goodId
              },
              datatype:"json",        // 返回类型，text文本、html页面、json数据
              success:function(response){
                console.log("返回: " + response);
                if(response.code === 200) {
                  layer.msg("删除商品成功!");
                  layer.close(index);                         // 关闭当前窗口
                  tableFlush();
                }
              },
              error:function(response){
                console.log("出错返回: " + response);
              }
            });
          });
        } else if(obj.event === 'edit'){
          layer.open({     // 弹出框处理  模态框
            type: 1               // 模态框
            ,title: '编辑商品' //不显示标题栏
            ,closeBtn: true
            ,area: ['500px','500px']  // 宽和高
            ,shade: 0.5
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,btn: ['编辑', '取消']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: $('#insert_form').html()         // 引入自定义表单
            ,btn1: function(index, layero){            // 这个是新增按钮点击事件
              // layer.msg("新增按钮执行");
              let goodType = $("#goodType").val();
              let goodTitle = $("#goodTitle").val();
              let goodCode = $("#goodCode").val();
              let goodPrice = $("#goodPrice").val();
              let goodStore = $("#goodStore").val();
              // let goodPic = $("#goodPic").val();
              let goodStatus = $("input[name='goodStatus']:checked").val();
              $.ajax({
                url:"/good/updateById",           // 请求路径
                type:"post",                  // 请求的方式，不区分大小写
                cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                contentType:"application/json;charset=utf-8",
                data: JSON.stringify({
                  goodType:goodType,
                  goodTitle:goodTitle,
                  goodCode:goodCode,
                  goodPrice:goodPrice,
                  goodStore:goodStore,
                  // goodPic:goodPic,
                  goodStatus:goodStatus,
                  goodId:data.goodId
                }),
                datatype:"json",        // 返回类型，text文本、html页面、json数据
                success:function(response){
                  console.log("返回: " + response);
                  if(response.code === 200) {
                    layer.msg("编辑商品成功!");
                    layer.close(index);                         // 关闭当前窗口
                    tableFlush();
                  }
                },
                error:function(response){
                  console.log("出错返回: " + response);
                }
              });
            }
            ,success: function(layero){

            }
          });


        }
      });
    });
  }

  tableFlush();
</script>

</body>
</html>
